const c1 = document.querySelector("#c1");
const gd = c1.getContext("2d");

clock();

setInterval(clock, 1000);
function clock() {
  const W = 500,
    H = 500,
    coverWidth = 40,
    x = c1.width / 2,
    y = c1.height / 2,
    r = W / 2;

  gd.clearRect(0, 0, c1.width, c1.height);

  gd.beginPath();
  gd.moveTo(200, 300);
  gd.lineTo(400, 300);
  gd.stroke();
  gd.lineWidth = 30;
  gd.strokeStyle = "rgba(255, 0, 0, .2)";
  gd.stroke();

  // 表盘
  gd.beginPath();
  gd.arc(x, y, r + coverWidth / 2, 0, Math.PI * 2);

  const gradient = gd.createRadialGradient(x, y, r, x, y, r + coverWidth);
  gradient.addColorStop(0, "#eee");
  gradient.addColorStop(0.5, "#fff");
  gradient.addColorStop(1, "#999");
  gd.lineWidth = coverWidth;
  gd.strokeStyle = gradient;
  gd.stroke();

  // --- 外圈
  gd.beginPath();
  gd.arc(x, y, r + coverWidth, 0, Math.PI * 2);
  gd.lineWidth = 1;
  gd.strokeStyle = "#444";
  gd.stroke();

  // --- 内圈
  gd.beginPath();
  gd.arc(x, y, r, 0, Math.PI * 2);
  gd.lineWidth = 1;
  gd.strokeStyle = "#777";
  gd.stroke();

  // 刻度
  const hourTickWidth = 6,
    hourTickHeight = 20;
  const minuteTickWidth = hourTickWidth / 2,
    minuteTickHeight = hourTickHeight / 2;
  for (let i = 0; i < 60; i++) {
    // gd.fillRect(x, y - r, 60, 20);

    let w = 0,
      h = 0;
    if (i % 5 === 0) {
      w = hourTickWidth;
      h = hourTickHeight;
      gd.fillText(i / 5, 0, 0);
    } else {
      w = minuteTickWidth;
      h = minuteTickHeight;
    }
    // gd.fillRect(x - w / 2, y - r, w, h);

    let X = x - w / 2,
      Y = y - r;

    const cx = w / 2,
      cy = r;
    gd.save();

    gd.translate(X + cx, Y + cy);
    gd.rotate((i * 6 * Math.PI) / 180);
    gd.fillRect(-cx, -cy, w, h); // 刻度

    gd.restore();
  }

  // 数字
  for (let i = 0; i < 60; i += 5) {
    let w = 0,
      h = 0;
    if (i % 5 === 0) {
      w = hourTickWidth;
      h = hourTickHeight;
      gd.fillText(i / 5, 0, 0);
    } else {
      w = minuteTickWidth;
      h = minuteTickHeight;
    }
    // gd.fillRect(x - w / 2, y - r, w, h);

    let X = x - w / 2,
      Y = y - r;

    const cx = w / 2,
      cy = r;

    gd.save();

    gd.translate(X + cx, Y + cy);
    gd.rotate((i * 6 * Math.PI) / 180);

    const c22 = document.createElement("canvas");
    const w22 = 200,
      h22 = 100;
    c22.width = w22;
    c22.height = w22;
    c22.style.border = "1px solid red";
    const gd22 = c22.getContext("2d");
    gd22.font = "bold 20px 宋体";
    gd22.textAlign = "center";
    gd22.textBaseline = "middle";
    gd22.translate(w22 / 2, h22 / 2);
    gd22.rotate(-(i * 6 * Math.PI) / 180);

    // document.body.appendChild(c22);

    if (i % 5 === 0) {
      const text = i / 5;
      // gd.fillText(text === 0 ? 12 : text, -cx + w / 2, -cy + h); // 数字
      if ([0, 12, 3, 6, 9].includes(text)) {
        gd22.fillStyle = "red";
      }
      gd22.fillText(text === 0 ? 12 : text, 0, 0);

      gd.drawImage(c22, -cx + w / 2 - w22 / 2, -cy + h - h22 / 2 / 2);
    }

    gd.restore();
  }

  // 指针
  // const ww = 20,
  //   hh = 200;
  // const ox = 0,
  //   oy = 0;
  // gd.beginPath();
  // gd.moveTo(x - ww / 2, y);
  // gd.lineTo(x, y - hh);
  // gd.lineTo(x + ww / 2, y);
  // gd.lineTo(x, y + hh / 10);
  // gd.closePath();
  // gd.fill();

  // function drawPointer1() {
  //   const ww = 20,
  //     hh = 200;
  //
  //   gd.translate(x, y);
  //   gd.rotate((180 * Math.PI) / 180);
  //
  //   gd.save();
  //   gd.beginPath();
  //   gd.moveTo(-ww / 2, 0);
  //   gd.lineTo(0, -hh);
  //   gd.lineTo(ww / 2, 0);
  //   gd.lineTo(0, hh / 10);
  //   gd.closePath();
  //   gd.fill();
  // }

  // // 时针
  // drawPointer(14, 120, 0, "#ccc");
  // // 分针
  // drawPointer(10, 160, 0, "#555");
  // // 秒针
  // drawPointer(6, 200, 0, "#a10");

  refresh();
  function refresh() {
    const oDate = new Date();
    const hour = ((oDate.getHours() + oDate.getMinutes() / 60) * 360) / 12;
    const minute = ((oDate.getMinutes() + oDate.getSeconds() / 60) * 360) / 60;
    const second = (oDate.getSeconds() * 360) / 60;

    // 时针
    drawPointer(14, 120, hour, "#ccc");
    // 分针
    drawPointer(10, 160, minute, "#555");
    // 秒针
    drawPointer(6, 200, second, "#a10");
  }

  gd.save();
  gd.beginPath();
  gd.arc(x, y, 4, 0, Math.PI * 2);
  gd.strokeStyle = "#ccc";
  gd.fillStyle = "#ccc";
  gd.fill();
  gd.stroke();
  gd.restore();

  function drawPointer(ww, hh, rr, color) {
    const w = ww || 0,
      h = hh || 0,
      rotate = rr || 0;

    gd.save();

    gd.translate(x, y);
    gd.rotate((rotate * Math.PI) / 180);

    gd.beginPath();
    gd.moveTo(-w / 2, 0);
    gd.lineTo(0, -h);
    gd.lineTo(w / 2, 0);
    gd.lineTo(0, h / 10);
    gd.closePath();

    gd.fillStyle = color || "#000";
    gd.fill();

    gd.restore();
  }
}
